<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示ES查询的高亮结果</title>
    <link rel="stylesheet" href="plugins/bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="plugins/axios/axios.min.js"></script>
    <script type="text/javascript" src="plugins/vue/vue.min.js"></script>
    <script type="text/javascript" src="plugins/common.js"></script>
</head>
<body>
<div id="app" class="container" style="margin-top: 30px">
    <form class="form-inline">
        <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" v-model="keyword" placeholder="请输入个人信息关键字">
        </div>
        <button type="button" class="btn btn-primary mb-2" @click="searchAll">查询</button>
    </form>
    <table class="table table-hover table-striped">
        <tr>
            <th>用户名</th>
            <th>年龄</th>
            <th>个人信息</th>
        </tr>
        <tr v-for="item in pageList.data">
            <td>{{item.userName}}</td>
            <td>{{item.age}}</td>
            <td>
                <div v-html="item.intro"></div>
            </td>
        </tr>
    </table>
    <span style="color: red;font-weight: bold">共计查询{{pageList.total}}条数据</span>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                keyword: null,
                pageList: {}
            }
        },
        methods: {
            searchAll() {
                this.$http.get("/emp?keyword=" + this.keyword).then(res => {
                    this.pageList = res.data;
                })
            }
        },
        mounted() {
            this.searchAll();
        }
    })
</script>
</html>
